<template>

	<view class="container">
		<view class="daoheng01">
			<text class="daoheng_01_01">{{username}} 得分情况</text>
			<picker mode="date" :value="date" :start="startDate" :end="endDate" fields="year" @change="nian">
				<text class="transparent-tag">{{nianfen}}年</text>
			</picker>
		</view>
		<view class="months">
			<yue class="yue" @monthSelected="onMonthSelected"></yue>
		</view>
		<view class="daoheng02">
			<text @click="showContent('ability')" :class="{ active: currentContent === 'ability' }">能力维度</text>
			<text @click="showContent('qualityVue')"
				:class="{ active: currentContent === 'qualityVue' }">潜力与价值观维度</text>
			<text @click="showContent('nineGridVue')"
				:class="{ active: currentContent === 'nineGridVue' }">人才评定模型</text>
		</view>

		<view v-if="currentContent == 'ability'">
			<view class="zhuti">

				<view class="umessage" v-if="categories==''">
					本月暂无数据
				</view>
				<view class="zhuti2" v-else>
					<view class="zhuti02">
						<view class="chart-container">
							<qiun-data-charts type="radar" :opts="opts" :chartData="chartData"></qiun-data-charts>
						</view>
					</view>
					<view class="zhuti03">
						<view class="zhuti03_1">
							<view class="zhti03_1_1">
								<text class="zhuti03_01">能力维度得分</text>
								<text>{{zong.toFixed(2)}}分</text>
							</view>
							<view class="zhuti03_1_2">
								<view v-for="(category, index) in categories" :key="index" class="list-item">
									<view class="item-title">
										<view class="title-text">{{ category.category_Name }}</view>
										<view class="fenshu">{{category.score}}分</view>
									</view>
									<view class="sub-list">
										{{ category.content_Name }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="currentContent == 'qualityVue'">
			<view class="zhuti">

				<view class="umessage" v-if="categories==''">
					本月暂无数据
				</view>
				<view class="zhuti2" v-else>
					<view class="zhuti02">

						<view class="index">
							<view class="chart-container">
								<qiun-data-charts type="radar" :opts="opts" :chartData="chartData"></qiun-data-charts>
							</view>
						</view>

					</view>
					<view class="zhuti03">
						<view class="zhuti03_1">
							<view class="zhti03_1_1">
								<text class="zhuti03_01">潜力与价值观维度得分</text>
								<text>{{zong.toFixed(2)}}分</text>
							</view>
							<view class="zhuti03_1_2">
								<view v-for="(category, index) in categories" :key="index" class="list-item">
									<view class="item-title">
										<view class="title-text">{{ category.category_Name }}</view>
										<view class="fenshu">{{category.score}}分</view>
									</view>
									<view class="sub-list">
										{{ category.content_Name }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 九宫格 -->
		<view v-if="currentContent == 'nineGridVue'">

			<view class="umessage" style="text-align: center;" v-if="feiwu==true">
				本月暂无数据
			</view>


			<view class="fw" v-else>
				<view class="cc_1_2">
					<view class="m3">
						<view class="m3_1">
							<text>能力维度得分</text>
							<text>{{nengzong.toFixed(2)}}分</text>
						</view>
						<view class="m3_2">
							<text>潜力与价值观维度得分</text>
							<text>{{suzong.toFixed(2)}}分</text>
						</view>
					</view>
				</view>

				<view class="m4">
					<view class="m4_1">
						<view id="talent-grid">
							<!-- 横坐标 -->
							<view class="axis x-axis">
								<text class="x1">0</text>
								<text class="x2">33</text>
								<text class="x3">67</text>
								<text class="x4">100</text>
								<text class="xt">[潜力与价值观维度100分]</text>
							</view>
							<!-- 纵坐标 -->
							<view class="axis y-axis">
								<text class="y1">100</text>
								<text class="y2">67</text>
								<text class="y3">33</text>
								<text class="y4">0</text>
								<text class="yt">[绩效维度100分]</text>
							</view>
							<!-- 九宫格 -->
							<view class="grid-container">
								<view class="grid-row">
									<view class="grid-cell">
										<image src="/static/number/numb6.jpg"></image>
									</view>
									<view class="grid-cell">
										<image src="/static/number/numb8.jpg"></image>
									</view>
									<view class="grid-cell">
										<image src="/static/number/numb9.jpg"></image>
									</view>
								</view>
								<view class="grid-row">
									<view class="grid-cell">
										<image src="/static/number/numb3.jpg"></image>
									</view>
									<view class="grid-cell">
										<image src="/static/number/numb5.jpg"></image>
									</view>
									<view class="grid-cell">
										<image src="/static/number/numb7.jpg"></image>
									</view>
								</view>
								<view class="grid-row">
									<view class="grid-cell">
										<image src="/static/number/numb1.jpg"></image>
									</view>
									<view class="grid-cell">
										<image src="/static/number/numb2.jpg"></image>
									</view>
									<view class="grid-cell">
										<image src="/static/number/numb4.jpg"></image>
									</view>
								</view>
							</view>
							<!-- 张三的位置 -->
							<view class="person" :style="{ top: `${msjY}rpx`, left: `${msjX}rpx` }" id="zhangsan">
								<view class="dot"></view>
								<view class="name">{{username}}</view>
							</view>

						</view>

					</view>
				</view>

				<view class="m5">
					<view class="m5_1">
						<text style="color: #333333;">九宫格人才定位说明</text>
						<view class="text-with-dot">1号位置：问题员工绩效低且发展潜力弱建议调岗或淘汰</view>
						<view class="text-with-dot">2号位置：差距员工绩效较低且发展潜力较弱建议进行绩效辅导或调整岗位，分析原因，继续观察</view>
						<view class="text-with-dot">3号位置：基本胜任绩效中等，发展潜力较低建议留任观察，给与辅导与培训</view>
						<view class="text-with-dot">4号位置：待发展者，绩效较低但发展潜力较大，建议针对性分析原因，加强辅导，进行资源支持，给予机会</view>
						<view class="text-with-dot">5号位置：中坚力量，建议给予挑战性任务，并给予关注与辅导</view>
						<view class="text-with-dot">6号位置：熟练员工，建议立足现岗位发展，扩大职责，给予支持</view>
						<view class="text-with-dot">7号位置：潜力之星，建议设置业绩挑战目标，并给予辅导</view>
						<view class="text-with-dot">8号位置：绩效之星，建议给予历练机会，提供更大成长空间</view>
						<view class="text-with-dot">9号位置：超级明星，建议承担更大责任，激励倾斜，重点关注</view>
					</view>

				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	//js文件
	import {
		listUsergrades,
		listUsergrades02,
		listUsergrades03,
		listUsergrades04,
		listUsergrades05
	} from '../../api/yue.js'
	import {
		ref,
		onMounted,
		computed,
		reactive
	} from 'vue';
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	import yueVue from "@/components/yue/yue.vue";


	//取token对象
	import {
		UserDetails
	} from "@/store/UserDetails.js"



	const ll = UserDetails()
	const username = ref('');
	//定义基层一个对象往后端发送
	const form = ref({
		userId: 0,
		parentId: 0,
		time: "",
		quarter: 0,
	});
	//定义中层一个对象往后端发送
	const form01 = ref({
		userId: 0,
		month: "",
		year: '',
	});
	//定义九宫格基层一个对象往后端发送
	const jiuform = ref({
		userId: 0,
		time: "",
		quarter: 0,
	});
	//定义九宫格中层一个对象往后端发送
	const jiuform01 = ref({
		userId: 0,
		month: "",
		year: '',
	});

	//定义一个没有用的数据来判断九宫咯是否有数据
	const feiwu = ref(false);
	//获取年份
	const nian = (e) => {
		nianfen.value = e.detail.value
		chaxunjs();
	}
	//查询基层总分
	const chaxunzongf = async () => {
		let pp = await listUsergrades04(jiuform.value)
		if (pp[0] == 0 && pp[1] == 0) { //判断这个月的九宫格是否有数据

			feiwu.value = true;
		} else {
			feiwu.value = false;
		}
		nengzong.value = pp[0];
		suzong.value = pp[1];
		jiugongge();
	}
	//查询中层总分
	const chaxunzongfen = async () => {

		let pp = await listUsergrades05(jiuform01.value)
		if (pp[0] == 0 && pp[1] == 0) { //判断这个月的九宫格是否有数据
			feiwu.value = true;
		} else {
			feiwu.value = false;
		}
		nengzong.value = pp[0];
		suzong.value = pp[1];
		jiugongge();
	}


	const onMonthSelected = (month) => {

		if (month == '1') {
			month = '01';
			jidu = "1";
		} else if (month == '2') {
			month = '02';
			jidu = "1";
		} else if (month == '3') {
			month = '03';
			jidu = "1";
		} else if (month == '4') {
			month = '04';
			jidu = "2";
		} else if (month == '5') {
			month = '05';
			jidu = "2";
		} else if (month == '6') {
			month = '06';
			jidu = "2";
		} else if (month == '7') {
			month = '07';
			jidu = "3";
		} else if (month == '8') {
			month = '08';
			jidu = "3";
		} else if (month == '9') {
			month = '09';
			jidu = "3";
		} else if (month == '10' ||
			month == '11' ||
			month == '12') {
			jidu = "4";
		}
		//点击月份存到currentMonth中
		currentMonth.value = month;
		showContent('ability')

	};

	//定义一个月
	const currentMonth = ref('');
	currentMonth.value = new Date().getMonth() + 1;
	//定义一个季度
	var jidu = Math.floor(parseInt(currentMonth.value) / 3)
	//定义一个年
	const nianfen = ref("")
	nianfen.value = new Date().getFullYear();
	//定义一个角色id的值
	var id = ref(0)
	//页面一打开的方式		--查询角色
	const chaxunjs = async () => {
		let pp = await listUsergrades02(userId1.value)
		//九宫格姓名
		username.value = pp.nick_name
		//获取角色id
		id.value = pp.role_id
		chaxundangqian();

		//查询出来然后再走这个获取当月的季度像后端传值	
		chaxun();

	}

	//定义一个数组
	const arr = ref([])
	const ars = ref([])
	//总数
	const zong = ref(0);
	//能力总分
	const nengzong = ref(0);
	//素质总分
	const suzong = ref(0);
	//根据角色id查询用户的数据
	const chaxun = async () => {
		zong.value = 0;
		arr.value = [];
		ars.value = [];

		//代表基层员工
		if (id.value == 100) {
			console.log("基层员工的查询条件")
			console.log(form.value)
			let pp = await listUsergrades(form.value)

			categories.value = pp
			for (var i = 0; i < categories.value.length; i++) {

				zong.value += categories.value[i].score
				arr.value.push(categories.value[i].category_Name + "-" + categories.value[i].score)
				ars.value.push(categories.value[i].score)
			}

			getData()

		} else if (id.value == 101) {
			//代表中层管理人员
			console.log("中层领导的查询条件")
			console.log(form01.value)
			let pp = await listUsergrades03(form01.value)
			categories.value = pp

			for (var i = 0; i < categories.value.length; i++) {
				zong.value += categories.value[i].score
				arr.value.push(categories.value[i].category_Name + "-" + categories.value[i].score)
				ars.value.push(categories.value[i].score)
			}

			getData()
		}
	}
	const currentContent = ref('ability') // 默认显示能力评分
	// 数据源
	const categories = ref([]);
	const chartData = ref({})
	const opts = ref({
		fontSize: 12,
		extra: {
			radar: {
				radius: 60,
				max: 20,
			}
		}
	})

	function getData() {
		setTimeout(() => {
			const res = {
				categories: arr.value,
				series: [{
					name: '评分详情',
					data: ars.value,

				}],

			}

			chartData.value = reactive(JSON.parse(JSON.stringify(res)));
		}, 750)
	}
	//九宫格
	//定义九宫格所需的值1
	const msjX = ref(0);
	const msjY = ref(0);
	// script.js
	const msj = ref(null);
	// 九宫格方法
	//定义方法处理九宫格
	const jiugongge = () => {

		// findname();
		const gridWidth = 500;
		const gridHeight = 500;

		// 假设 msjPotential 和 msjPerformance 是从某处获取的动态数据
		const msjPotential = nengzong.value; // 潜力得分
		const msjPerformance = suzong.value; // 绩效得分
		// 计算孟淑君在九宫格中的位置
		msjX.value = (msjPotential / 100) * gridWidth;
		msjY.value = gridHeight - (msjPerformance / 100) * gridHeight;

	};

	//查询一打开方式的方法
	const chaxundangqian = () => {
		if (id.value == 100) {
			//基层年份和月份
			form.value.time = nianfen.value + "-" + currentMonth.value;
			//季度
			form.value.quarter = jidu
			form.value.userId = userId1.value
		} else if (id.value == 101) {
			//中层的年份和月份
			form01.value.year = nianfen.value;
			form01.value.userId = userId1.value;
			form01.value.month = currentMonth.value;
		}
		if (currentContent.value == 'ability') { //能力测评

			form.value.parentId = 1
			form01.value.parentId = 1
		} else if (currentContent.value == 'qualityVue') { //素质测评

			form.value.parentId = 7
			form01.value.parentId = 7
		} else if (currentContent.value == 'nineGridVue') { //九宫格

			if (id.value == 100) { //基层点击九宫格
				jiuform.value.time = nianfen.value + "-" + currentMonth.value;
				jiuform.value.quarter = jidu;
				jiuform.value.userId = userId1.value
				chaxunzongf();
			} else if (id.value == 101) { //中层点击九宫格
				jiuform01.value.year = nianfen.value;
				jiuform01.value.month = currentMonth.value;
				jiuform01.value.userId = userId1.value
				chaxunzongfen();
			}
			return;
		}
	}



	const showContent = (content) => {
		if (content == null) {
			currentContent.value = 'ability'
			chaxundangqian()
			chaxun()
		} else {
			currentContent.value = content
			chaxundangqian()
			chaxun()
		}

	}


	const userId1 = ref(0);
	onLoad((option) => {

		if (option.userId != undefined) {
			option.userId = Number(option.userId)
			userId1.value = option.userId
		} else {
			userId1.value = ll.UserText.data.userId
		}
		//查询角色
		chaxunjs()
	});
</script>




<style lang="scss" scoped>
	.container {
		background-color: #fff;
	}

	.umessage {
		font-size: 14px;
		color: #666;
		text-align: center;
	}

	.title-text {
		font-size: 28rpx;
		color: #333;
		font-weight: 700;
	}

	.fenshu {
		color: #333;
		font-weight: 500;
		font-size: 28rpx;
	}

	.sub-list {
		font-size: 16rpx;
		border-bottom: 1px solid #E7E7E7;
		padding-bottom: 15px;
	}

	.item-view {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 20px;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s ease, color 0.3s ease;
		/* 添加过渡效果 */
	}

	.item {
		width: 10%;
		/* 确保项目文本和对钩图标在同一行内对齐 */
		text-align: left;
		/* 项目文本左对齐 */
	}

	.check-mark {
		position: absolute;
		right: 0px;
		/* 对钩图标距离项目右边的距离 */
		bottom: 0px;
		/* 对钩图标距离项目底部的距离 */
		width: 20px;
		/* 对钩图标的宽度 */
		height: 20px;
		/* 对钩图标的高度 */
	}

	.active {
		color: #333;
		font-weight: 500;
	}



	.m1 {
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		background-color: white;
		height: 90rpx;

		.m1_1 {
			display: flex;
			width: 80%;

			align-items: center;
			margin-left: 20rpx;

			.m1_1_1 {
				margin-left: 20rpx;

				.nian {
					width: 70rpx;
					background-color: #c9dbfd;
					color: #0865f7;
					border-radius: 10rpx;

					.tt {
						margin-left: 18rpx;
						font-size: 28rpx;
					}
				}
			}

			.m1_1_2 {
				font-size: 42rpx;
				font-weight: bold;
			}
		}

	}

	.m2 {
		height: 100%;

		.cc {
			display: flex;
			flex-direction: column;

			.cc_1 {

				height: 80rpx;
				margin-top: 20rpx;

				.cc_1_1 {
					display: flex;

					justify-content: space-around;

				}
			}

			.cc_1_2 {
				margin-top: 20rpx;
			}

		}
	}

	.m3 {
		box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);
		margin: 0 10px;
		height: 160rpx;

		border-radius: 10rpx;
		background-color: white;
		color: #666666;

		.m3_1 {
			width: 90%;
			// border: 1px solid fuchsia;
			height: 50%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 40rpx;

		}

		.m3_2 {
			// border: 1px solid aqua;
			width: 90%;
			height: 50%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// border-top: 1px solid gainsboro;
			margin-left: 40rpx;
		}
	}

	.m4 {
		margin-left: 25rpx;

		height: 680rpx;
		width: 94%;
		background-color: white;

		box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);

		.m4_1 {
			margin-top: 25rpx;
			margin-left: 35rpx;
			border: 1px solid white;
		}
	}

	.m5_1 {
		padding: 20px;
		color: #979797;
		line-height: 28px;
		font-size: 24rpx;
	}

	/* styles.css */
	#talent-grid {

		position: relative;
		width: 500rpx;
		height: 500rpx;
		margin: 50px auto;
		border: 1px solid #000;
		margin-top: 60rpx;
		// border: 1px solid red;
	}

	.axis {
		position: absolute;
		font-size: 12px;
		color: #333;
	}

	.x1 {
		position: absolute;
		bottom: -5px;
		left: 0;

	}

	.x2 {
		position: absolute;
		bottom: -5px;
		left: 80px;
	}

	.x3 {
		position: absolute;
		bottom: -5px;
		left: 168px;
	}

	.x4 {
		position: absolute;
		bottom: -5px;
		left: 250px;
	}

	.xt {
		position: absolute;
		bottom: -40px;
		left: 150px;
		font-size: 12px;
		color: red;
	}

	.x-axis {
		bottom: -15px;
		left: 0;
		width: 100%;
		text-align: center;
	}

	.y-axis {
		top: 0;
		left: -20px;
		height: 100%;
		writing-mode: vertical-rl;
		text-align: center;
	}

	.y1 {
		position: absolute;
		top: 0;
		left: -5px;
	}

	.y2 {
		position: absolute;
		top: 80px;
		left: -5px;
	}

	.y3 {
		position: absolute;
		top: 165px;
		left: -5px;
	}

	.y4 {
		position: absolute;
		top: 250px;
		left: -5px;
	}

	.yt {
		position: absolute;
		top: 150px;
		left: -25px;
		font-size: 12px;
		color: red;
	}

	image {
		width: 120rpx;
		height: 120rpx;
	}

	.grid-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	}

	.grid-row {
		display: flex;
		height: 33.33%;

	}

	.grid-cell {
		width: 33.33%;
		border: 1px dashed #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.person {
		position: relative;
		top: 0rpx;
		left: 0rpx;
		position: absolute;
		text-align: center;
	}

	.dot {

		width: 15px;
		height: 15px;
		border-radius: 50%;
		margin-bottom: 5px;
	}

	.name {
		font-size: 12px;
		color: #333;
	}

	#zhangsan .dot {
		background-color: red;
	}

	#lisi .dot {
		background-color: blue;
	}

	#msj .dot {
		background-color: green;
	}

	.transparent-tag {

		display: block;
		width: 160rpx;
		height: 68rpx;
		line-height: 68rpx;
		color: #0C5FFA;
		border-radius: 10rpx;
		text-align: center;
		background-color: rgba($color: #0C5FFA, $alpha: 0.22);
		font-size: 28rpx;
		font-weight: 500;
		background-image: url('../../static/number/jt.png');
		background-repeat: no-repeat;
		background-position: right center;


	}



	.months {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 18rpx;
		padding: 10px 0;

	}

	.daoheng02 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		color: #666;
		margin-bottom: 30rpx;
		background-color: #ffffff;
		padding-left: 10px;
		padding-right: 10px;
		height: 40px;
		line-height: 40px;

	}

	.daoheng02 text {
		margin-right: 10px;
		cursor: pointer;
		position: relative;
		padding-bottom: 5px;
	}

	.daoheng02 text::after {
		content: '';
		position: absolute;
		bottom: -5rpx;
		left: 0;
		right: 0;
		margin: auto;
		width: 50%;
		height: 2px;
		background-color: blue;
		transform: scaleX(0);
		transition: transform 0.3s ease-in-out;

	}

	.daoheng02 text.active::after {
		transform: scaleX(1);

	}

	.daoheng01 {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 10px;
	}


	.daoheng_01_01 {
		font-weight: bold;
		color: #333333;
		margin-right: 30px;

	}



	.zhuti02 {
		background-color: #FFFFFF;
		border-radius: 10px;
		

	}

	.zhuti03 {
		background-color: #FFFFFF;
		box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		margin: 15px 20px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 15px 0;
	}

	.zhuti03_1 {
		width: 90%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.zhti03_1_1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 40px;
	}

	.zhuti03_1_2 {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		background-color: #F7F7F7;
		width: 100%;

		border-radius: 10px;
		/* 设置圆角 */
		box-shadow: 0 5px 6px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
	}

	.zhuti03_01 {
		color: #666666;
	}

	.list-item {
		margin: 5px 0;

	}

	.item-title {
		display: flex;
		justify-content: space-between;
		font-weight: bold;
		margin-bottom: 5rpx;
		position: relative;
		/* 添加相对定位 */
		padding-left: 40rpx;
		/* 为黑点留出空间 */
	}

	.item-title::before {
		content: '•';
		/* 显示黑点 */
		position: absolute;
		left: 0;
		top: 0;
		color: #000;
		/* 黑点颜色 */
	}

	.sub-list {
		padding-left: 20px;
		font-size: 0.9em;
		/* 调整子列表项的字体大小 */
		font-weight: 300;
		/* 调整子列表项的字体粗细 */
		margin: 5px 0;
	}
</style>